<template>
    <el-dialog
        v-model="apiAddOrUpdateDialogVisible"
        title="添加路由API"
        width="30%"
        align-center
        :show-close="false"
        :close-on-click-modal="false"
    >
        <div class="formContainer">
            <el-form :model="apiForm" :rules="apiRules" ref="apiFormRef">
                <el-form-item label="所属微服务" label-width="20%" prop="applicationName">
                    <el-select v-model="apiForm.applicationName" clearable placeholder="所属微服务" style="width: 100%" @change="serviceChange()">
                        <el-option :value="item.applicationName" :label="item.applicationName" v-for="item in applicationList" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="API名称" label-width="20%" prop="name">
                    <el-input v-model="apiForm.name" placeholder="API名称" clearable />
                </el-form-item>
                <el-form-item label="API编码" label-width="20%" prop="code">
                    <el-input v-model="apiForm.code" placeholder="API编码" clearable />
                </el-form-item>
                <el-form-item label="路由类型" label-width="20%" prop="code">
                    <el-select v-model="apiForm.routeType" placeholder="Select" style="width: 100px" @change="serviceChange()">
                        <el-option label="lb" value="lb" />
                        <el-option label="http" value="http" />
                    </el-select>
                </el-form-item>
                <el-form-item v-if="apiForm.routeType === 'http'" label="IP地址" label-width="20%">
                    <el-input v-model="apiForm.httpIp" placeholder="IP地址" clearable/>
                </el-form-item>
                <el-form-item v-if="apiForm.routeType === 'lb'" label="微服务名称" label-width="20%" prop="code">
                    <el-input disabled v-model="apiForm.routeServiceName" placeholder="微服务名称" clearable />
                </el-form-item>
                <el-form-item label="路由地址" label-width="20%" prop="routePath">
                    <el-input v-model="apiForm.routePath" placeholder="路由地址" clearable />
                </el-form-item>
                <el-form-item label="是否跨域" label-width="20%" prop="corsState">
                    <el-select v-model="apiForm.corsState" clearable placeholder="是否跨域" style="width: 100%">
                        <el-option value="REJECT_CORS" label="拒绝跨域"></el-option>
                        <el-option value="ALLOW_CORS" label="支持跨域"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="断言" label-width="20%" prop="predicates">
                    <el-input v-model="apiForm.predicates" placeholder="断言" clearable />
                </el-form-item>
                <el-form-item label="是否添加超时时间">
                    <el-radio-group v-model="apiForm.timeOut">
                        <el-radio :label="true">是</el-radio>
                        <el-radio :label="false">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item v-if="apiForm.timeOut" label="超时时间" label-width="20%" prop="timeOut">
                    <el-input-number v-model="apiForm.timeOutNum" :min="1"/>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelDialog()">取 消</el-button>
                <el-button type="primary" :loading="saveLoading" @click="submitDialog()">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
import {addApiRouteInfoQuery, apiRouteInfoQuery, updateApiRouteInfoQuery} from '@/request/api'
import {ElNotification} from "element-plus";
import {applicationInfoQuery} from "@/request/service";

export default {
    name: "AddApiDialog",
    props: ['apiForm'],
    data() {
        return {
            apiRules: {
                name: [{ required: true, message: 'API名称不能为空', trigger: 'blur' }],
                code: [{ required: true, message: 'API编码不能为空', trigger: 'blur' }],
                routePath: [{ required: true, message: '路由地址不能为空', trigger: 'blur' }],
                predicates: [{ required: true, message: '断言内容不能为空', trigger: 'blur' }],
                applicationName: [{ required: true, message: '微服务不能为空', trigger: 'blur' }]
            },
            applicationList: [],
            saveLoading: false
        }
    },
    computed: {
        apiAddOrUpdateDialogVisible() {
            return this.$store.state.apiAddOrUpdateDialogVisible;
        },
        apiSearchData() {
            return this.$store.state.apiSearchData;
        }
    },
    methods: {
        cancelDialog() {
            this.$store.commit('closeApiAddOrUpdateDialogVisible');
        },
        submitDialog() {
            this.saveLoading = true
            let formEl = this.$refs['apiFormRef']
            if (!formEl) return
            formEl.validate((valid) => {
                if (valid) {
                    if (!this.apiForm.routePath.startsWith("/")) {
                        this.apiForm.routePath = "/" + this.apiForm.routePath;
                    }
                    if (!this.apiForm.predicates.startsWith("/")) {
                        this.apiForm.predicates = "/" + this.apiForm.predicates;
                    }
                    if (this.apiForm.routeType === 'lb') {
                        this.apiForm.routePath = "lb://" + this.apiForm.routeServiceName + this.apiForm.routePath;
                    } else if (this.apiForm.routeType === 'http') {
                        this.apiForm.routePath = "http://" + this.apiForm.httpIp + this.apiForm.routePath;
                    }
                    if (this.apiForm.id !== '') {
                        // 修改
                        updateApiRouteInfoQuery(this.apiForm).then(res => {
                            if (res.code === '200') {
                                ElNotification({
                                    title: 'Success',
                                    message: res.message,
                                    type: 'success'
                                })
                                this.$store.commit('closeApiAddOrUpdateDialogVisible');
                                apiRouteInfoQuery(this.apiSearchData).then(res => {
                                    this.$store.commit('changeRouterDataList', res.data);
                                })
                                this.saveLoading = false
                            }
                        }).catch(res => {
                            this.saveLoading = false
                        })
                    } else {
                        // 调用后端接口插入数据
                        addApiRouteInfoQuery(this.apiForm).then(res => {
                            if (res.code === '200') {
                                ElNotification({
                                    title: 'Success',
                                    message: res.message,
                                    type: 'success'
                                })
                                this.$store.commit('closeApiAddOrUpdateDialogVisible');
                                apiRouteInfoQuery(this.apiSearchData).then(res => {
                                    this.$store.commit('changeRouterDataList', res.data);
                                })
                            }
                            this.saveLoading = false
                        }).catch(res => {
                            this.saveLoading = false
                        })
                    }
                } else {
                    return false
                }
            })
        },
        serviceChange() {
            this.apiForm.routeServiceName = this.apiForm.applicationName
        }
    },
    mounted() {

    },
    created() {
        applicationInfoQuery({}).then(res => {
            if (res.code === '200') {
                this.applicationList = res.data;
            }
        })
    }
}
</script>

<style scoped lang="less">
    .formContainer {
        .selectIconsClass {
            width: 20px;
        }
    }
</style>